<template>
    <div class="input-list">
        <div class="error">
            <input type="text" class="city-input" placeholder="请输入城市名称" v-model="inputValue">
        </div>
        <div class="action" :style="{ display: isInput }">
            <div class="city-weather" v-if="store.isSave">
                <div class="city">
                    <span>{{ store.addCityName }}</span>
                    <span>{{ temp }}度</span>
                </div>
                <div class="btn">
                    <el-button type="primary" @click="search">查看</el-button>
                    <el-button type="primary" @click="del">删除</el-button>
                </div>
            </div>
        </div>
        <ul v-if="store.isInputText">
            <li>
                <router-link :to="`/search/${store.cityTip}`">
                    <span style="color: #fff;text-decoration: none;">{{ store.cityTip }}</span>
                </router-link>
                <span v-if="store.isInputSearch">抱歉,没有找到你想搜索的地方</span>
            </li>
        </ul>
        <span v-if="!store.isSave">暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。</span>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { useStore } from '../store/store';
import { inputTip } from '../api';
import { getCode, codeWeather } from '../api';
const store = useStore()
const inputValue = ref('')
const cityValue = ref('')

const cityWeather = ref('')
const adCode = ref('')
const temp = ref('')

const isInput = computed(() => {
    return inputValue.value ? 'none' : 'block'
})

// 点击查看当前城市
const search = () => {
    store.searchCity()
}

//删除
const del = () => {
    store.deleteCity()
}

// 异步方法,输入提示
async function input() {
    cityValue.value = await inputTip(inputValue.value, '7633c039e776357d868a4d0f4c7f0e9c')
    if (inputValue.value.length >= 2) {
        store.cityTip = cityValue.value.tips[0].name
    } else {
        store.cityTip = ''
    }
}

// 获取城市编码
async function getAdcode() {
    adCode.value = await getCode(store.addCityName, '7633c039e776357d868a4d0f4c7f0e9c')
    adCode.value = adCode.value.geocodes[0].adcode
}


// 获取天气
async function getWeather() {
    getAdcode()
    cityWeather.value = await codeWeather(adCode.value, '7633c039e776357d868a4d0f4c7f0e9c')
    temp.value = cityWeather.value.lives[0].temperature
}

// 主方法
async function mainFunc() {
    await getAdcode()
    await getWeather()
}

mainFunc()

watch(() => [inputValue.value], ([text]) => {
    if (text.length > 0) {
        store.isInputText = true
        input()
    } else {
        store.isInputText = false
    }
    // 错误提示
    if (text.length < 2) {
        store.isInputSearch = true
    }
    else {
        store.isInputSearch = false
    }
});

</script>

<style scoped lang="scss">
.input-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.city-input {
    margin-top: 20px;
    margin-bottom: 20px;
    background: rgb(0, 102, 138);
    height: 35px;
    width: 1100px;
    border: none;
    border-bottom: solid 1px #fff;
    outline: none;
    font-size: 15px;
    color: #fff;
    // 设置光标颜色
    caret-color: #fff;

    ::placeholder {
        color: #fff;
        /* 设置默认文字颜色为灰色 */
    }
}

.action {
    width: 1100px;
}

.city-weather {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    // 触碰
    &:hover {
        .btn {
            display: inline-block;
            margin-right: -70px;
        }

        .city {
            animation: widthChangeMove 0.2s;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
        }
    }

    // 不触碰
    &:not(:hover) {
        .btn {
            display: none;
        }

        .city {
            animation: widthChangeOut 0.5s infinite;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
        }
    }

    // 单独项
    .btn {
        display: none;
        width: 200px;
        margin-left: 10px;
    }

    .city {
        display: flex;
        justify-content: space-between;
        width: 1100px;
        background-color: rgb(0, 78, 113);
        padding: 15px;
    }
}

.city-input:focus {
    border: none;
    box-shadow: 0px 4px 8px rgb(0, 88, 93);
}

// 动画
@keyframes widthChangeMove {
    from {
        width: 1100px;
    }

    to {
        width: 800px;
    }
}

@keyframes widthChangeOut {
    from {
        width: 800px;
    }

    to {
        width: 1100px;
    }
}

ul {
    width: 1080px;

    li {
        padding: 15px 15px;
        background-color: rgb(1, 50, 73);
        margin-bottom: 10px;
    }
}
</style>
